<!-- todo 枚举 -->
<template>
  <div class="card-tab-box">
    <PubTable
      :isTabInner="true"
      :tableData="crudData"
      :uploadUrl="uploadUrl"
      @selected-items="getSelection"
    />
  </div>
</template>

<script lang="jsx" setup>
import "@/components/PubTable/style/pubTablecss.scss";
import {
  tableData as mockData,
  caserData,
} from "@/components/PubTable/utils/mockData.js";
import { ref, reactive, getCurrentInstance, onMounted,onActivated } from "vue";
let { proxy } = getCurrentInstance();

//全局数据配置
const crudData = ref({
  clums: [
    // {
    // 	type: "selection",
    // 	minWidth: 40,
    // 	label: "复选框",
    // 	fixed: "left",
    // },
    {
      type: "index",
      props: "index",
      label: "序号",
      width: 80,
      fixed: "left",
    },
    {
      props: "productName",
      label: "产品名称",
      search: {
        key: "productName",
        type: "input",
        placeholder: "搜索产品名称",
        minWidth: "200px",
        clearable: true,
        maxLength: 20,
      },
    },
    {
      props: "type",
      label: "通信方式",
      minWidth: "100px",
      search: {
        key: "type",
        type: "select",
        placeholder: "通信方式",
        clearable: true,
        maxLength: 20,
        // 串口、BLE、2/3/4G、WIFI、NB、ZigBee、Lora
        optionList: [
          {
            label: "串口",
            value: "串口",
          },
          {
            label: "BLE",
            value: "BLE",
          },
          {
            label: "2/3/4G",
            value: "2/3/4G",
          },
          {
            label: "WIFI",
            value: "WIFI",
          },
          {
            label: "NB",
            value: "NB",
          },
          {
           label: "ZigBee",
           value: "ZigBee",
          },
          {
            label: "Lora",
            value: "Lora",
          }
        ],
      },
    },
    {
      props: "updateTime",
      label: "更新时间",
      minWidth: "100px",
      search: {
        key: "updateTime",
        type: "timerange",
        startPlaceholder: "选择更新时间",
        endPlaceholder: "选择更新时间",
        separator: "至",
        clearable: true,
        maxLength: 20,
        timeFormatter: "YYYY-MM-DD HH:mm:ss",
      },
    },
  ],
  handleBtns: [
    {
      text: "更新",
      onClick: () => {
        getTableData();
      },
    },
  ],
  // sortRule 默认排序规则,排序字段prop在 clums中加上sortable
  sortRule: { prop: "value3", order: "descending" }, // prop: 'value3', order: 'descending'||'ascending'
  // data 获取数据getTableData
  data: [],
  // pager 分页配置
  pager: {
    total: 0,
    pageIndex: 1,
    pageSize: 10,
    pagerLang: [10, 20, 50, 100],
    sizeChange: (e) => {
      // 改变每页条数
      crudData.value.pager.pageSize = e;
      crudData.value.pager.pageIndex = 1;
      getTableData();
    },
    pageIndexChange: (e) => {
      // 改变页码
      crudData.value.pager.pageIndex = e;
      getTableData();
    },
  },
  // form 弹窗配置 可自定义或直接配置
  form: {
    formName: "新增",
    formShow: false,
    formList: [
      {
        key: "productName",
        type: "input",
        label: "intput类型",
        placeholder: "请输入intput类型",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入intput类型",
            trigger: "blur",
          },
        ],
      },
      {
        key: "type",
        type: "multInput",
        label: "multInput文本域",
        placeholder: "请输入multInput文本域",
        maxLength: 200,
        validate: [
          {
            required: true,
            message: "请输入multInput文本域",
            trigger: "blur",
          },
        ],
      },
      {
        key: "value3",
        type: "datetime",
        label: "日期选择器",
        placeholder: "请输入日期选择器",
        validate: [
          {
            required: true,
            message: "请输入日期选择器",
            trigger: "blur",
          },
        ],
      },
      {
        key: "value4",
        type: "timerange",
        label: "日期范围选择器",
        placeholder: "请输入日期范围选择器",
        separator: "至",
        validate: [
          {
            required: true,
            message: "请输入日期范围选择器",
            trigger: "blur",
          },
        ],
      },
      {
        key: "updateTime",
        type: "multSelect",
        label: "multSelect类型",
        placeholder: "请选择multSelect类型",
        validate: [
          {
            required: true,
            message: "请选择multSelect类型",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "张三",
            value: 0,
          },
          {
            label: "李四",
            value: 1,
          },
          {
            label: "王五",
            value: 2,
          },
        ],
      },
      {
        key: "value6",
        type: "select",
        label: "select单选",
        placeholder: "请选择select单选",
        validate: [
          {
            required: true,
            message: "请选择select单选",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "1",
            value: 0,
          },
          {
            label: "2",
            value: 1,
          },
          {
            label: "3",
            value: 2,
          },
        ],
      },
      {
        key: "value7",
        type: "input",
        label: "非必填类型",
        placeholder: "请输入非必填类型",
        maxLength: 20,
      },
      {
        key: "value8",
        type: "cascader",
        label: "cascader类型",
        placeholder: "请选择cascader类型",
        optionList: caserData,
        propset: {
          value: "id",
          label: "supervisionUnit",
        },
      },
    ],
    handelFormShow: (name, flag) => {
      crudData.value.form.formName = name;
      crudData.value.form.formShow = flag;
    },
    handelSubmit: (data) => {
      if (crudData.value.form.formName == "新增") {
        //新增
        console.log("新增", data);
      } else {
        //编辑
        console.log("编辑", data);
      }
      //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
      crudData.value.form.formShow = false;
    },
  },
  //查询参数回调
  searchCb: (e) => {
    console.log("searchCb", e);
    getTableData(e);
  },
  //重置回调
  reset: (e) => {
    console.log("reset", e);
    getTableData();
  },
});

const getTableData = (e) => {
  console.log("getTableData", e);
  let queryData = {
    page: crudData.value.pager.pageIndex,
    pageSize: crudData.value.pager.pageSize,
    productType: "PUB",
    productName: e&&e.productName || null,
    type: e&&e.type || null,
    startTime: e&&e.updateTime&&e.updateTime.length?e.updateTime[0]:null,
    endTime: e&&e.updateTime&&e.updateTime.length?e.updateTime[1]:null,
  };
  for(let item in queryData){
    if(queryData[item]==null){
      delete queryData[item];
    }
  }
  proxy
    ._http({
      url: "/api/product/page",
      type: "post",
      isBody: true,
      isLoading: true,
      data: queryData,
    })
    .then((res) => {
      console.log(999, res);
      crudData.value.data = Array.isArray(res.records) ? res.records : [];
      crudData.value.pager.total = res.total;
    })
    .catch((err) => {});
};

onMounted(() => {
  getTableData();
});
onActivated(() => {
  getTableData();
});

const uploadUrl = ref("/api/alarmPush/import");
var selectTion = reactive([]);
const getSelection = (val) => {
  selectTion = val;
  console.log("选中", selectTion);
};
</script>

<style lang="scss" scoped></style>
